17. CSS Flexbox: Advanced Concepts

I. Align-items & Align-self

Explanation: align-items container ke andar sabhi items ko vertically align karta hai. align-self se ek individual item ko override kiya ja sakta hai.

<style> .flexbox { display: flex; align-items: center; height: 150px; background: #e0f7fa; } .box { width: 60px; height: 60px; background: #ff6f61; margin: 10px; } .box.self { align-self: flex-end; background: #4caf50; } </style> <div class="flexbox"> <div class="box"></div> <div class="box self"></div> <div class="box"></div> </div> Run Code

II. Justify-content

Explanation: justify-content horizontal alignment control karta hai flex container me.

<style> .flexbox { display: flex; justify-content: space-around; background: #d1c4e9; padding: 10px; } .box { width: 50px; height: 50px; background: #673ab7; } </style> <div class="flexbox"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> Run Code

III. Flex-grow & Flex-shrink

Explanation: flex-grow space expand karne ke liye hota hai, jabki flex-shrink space kam karne ke liye hota hai.

<style> .flexbox { display: flex; background: #fbe9e7; } .box { height: 60px; margin: 5px; background: #ff5722; } .grow1 { flex-grow: 1; } .grow2 { flex-grow: 2; background: #ff9800; } </style> <div class="flexbox"> <div class="box grow1">1x</div> <div class="box grow2">2x</div> </div> Run Code

IV. Flex Wrap

Explanation: flex-wrap allow karta hai items ko wrap hone ka jab width kam ho.

<style> .flexbox { display: flex; flex-wrap: wrap; background: #b2ebf2; } .box { width: 200px; height: 100px; margin: 10px; background: #009688; color: white; display: flex; justify-content: center; align-items: center; } </style> <div class="flexbox"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> <div class="box">Box 4</div> </div> Run Code